import React, { FC, useState, useRef, useMemo, ChangeEvent } from 'react'
import { LeftOutlined, EditOutlined, CopyOutlined, QrcodeOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { useNavigate, useParams } from 'react-router-dom'
import type { InputRef } from 'antd'
import { Button, Typography, Space, Input, message, Tooltip, Popover } from 'antd'
import QRCode from 'qrcode.react'
import useGetPageInfo from '../../../../hooks/useGetPageInfo'
import { changePageTitle } from '../../../../store/pageInfoReducer'
import styles from './StatHeader.module.scss'

const { Title } = Typography

// 显示和修改页面标题
const TitleElem: FC = () => {
    const dispatch = useDispatch()
    const { title } = useGetPageInfo()

    const [editState, setEditState] = useState(false)

    // 修改编辑状态
    const handleEdit = () => {
        setEditState(true)
    }
    // 改变页面标题
    const handleChangeTitle = (event: ChangeEvent<HTMLInputElement>) => {
        const newTitle = event?.target.value.trim()
        if (!newTitle) return
        else dispatch(changePageTitle(newTitle))
    }
    if (editState) {
        return (
            <Input
                value={title}
                onPressEnter={() => setEditState(false)}
                onBlur={() => setEditState(false)}
                onChange={handleChangeTitle}
            />
        )
    }

    return (
        <Space>
            <Title>{title}</Title>
            <Button icon={<EditOutlined />} type="text" onClick={handleEdit} />
        </Space>
    )
}

const StatHeader: FC = () => {
    const nav = useNavigate()

    const { id } = useParams()
    const { title, isPublished } = useGetPageInfo()

    // 跳转到编辑问卷页面
    const editQuestionPage = () => {
        nav(`/question/edit/${id}`)
    }

    const urlInputRef = useRef<InputRef>(null)

    // 复制链接
    const handleCopy = () => {
        const elem = urlInputRef.current
        if (elem === null) return
        elem.select()
        document.execCommand('copy') // 复制选中的内容
        message.success('复制成功')
    }

    // 生成二维码
    // const getLinkAndQRCodeElem = () => {
    //     if (!isPublished) return
    //     // 拼接URL，需要参考 C 端的规则
    //     const URL = `http://localhost:3000/question/${id}`
    //     const QRcodeElem = (
    //         <div style={{ textAlign: 'center' }}>
    //             <QRCode value={URL} size={150}></QRCode>
    //         </div>
    //     )
    //     return (
    //         <Space>
    //             <Input value={URL} style={{ width: '300px' }} ref={urlInputRef} />
    //             <Tooltip title="复制链接">
    //                 <Button icon={<CopyOutlined />} onClick={handleCopy}></Button>
    //             </Tooltip>
    //             <Popover placement="bottom" content={QRcodeElem}>
    //                 <Button icon={<QrcodeOutlined />}></Button>
    //             </Popover>
    //         </Space>
    //     )
    // }

    // 使用useMemo【 1. 依赖项是否经常变化、2. 缓存的元素是否创建成本较高】
    const LinkAndQRCodeElem = useMemo(() => {
        if (!isPublished) return
        // 拼接URL，需要参考 C 端的规则
        const URL = `http://localhost:3000/question/${id}`
        const QRcodeElem = (
            <div style={{ textAlign: 'center' }}>
                <QRCode value={URL} size={150}></QRCode>
            </div>
        )
        return (
            <Space>
                <Input value={URL} style={{ width: '300px' }} ref={urlInputRef} />
                <Tooltip title="复制链接">
                    <Button icon={<CopyOutlined />} onClick={handleCopy}></Button>
                </Tooltip>
                <Popover placement="bottom" content={QRcodeElem}>
                    <Button icon={<QrcodeOutlined />}></Button>
                </Popover>
            </Space>
        )
    }, [id, isPublished])

    return (
        <div className={styles['header-wrapper']}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Space>
                        <Button type="link" icon={<LeftOutlined />} onClick={() => nav(-1)}>
                            返回
                        </Button>
                        <Title>{title}</Title>
                    </Space>
                </div>
                <div className={styles.main}>{LinkAndQRCodeElem}</div>
                <div className={styles.right}>
                    <Button type="link" icon={<EditOutlined />} onClick={editQuestionPage}>
                        编辑问卷
                    </Button>
                </div>
            </div>
        </div>
    )
}
export default StatHeader
